<template>
    <div class="box1">
        <!-- 搜索框和按钮 -->
        <SearchAndBtn :searchAndBtn="searchAndBtn"/>
        <!-- 表格 -->
        <MyTable :tableHead="tableHead"/>
    </div>
</template>

<script>
import SearchAndBtn from 'Ui/Search_and_Btn/index'
import MyTable from 'Ui/MyTable/index'
export default {
    components: {
        SearchAndBtn,
        MyTable
    },
    data(){
        return {
            searchAndBtn:{
                placeholder: `请按照 "用户姓名" 进行搜索`,
                btnName: '搜索',
            },
            tableHead: {
                // 表格内容需要变色，重点突出的 (可有可无, 没有默认什么特殊样式都没有)
                specialColor: {
                    colTitle: '用户权限',  // 想要变指定颜色的列名
                    rowTitle: '管理员用户', // 想要变指定颜色的行名 （可有可无，如果没有就是这整列都变色）
                    fieId: 'userpower', // 想要变色的数据的真实属性
                    color: 'red'    // 想要变得颜色
                },
                // 是否需要选中、删除等按钮 (可有可无, 没有默认是false)
                yes_or_no_select_delete_btn: {
                    select: true,
                    delete: true
                },
                // 是否需要分页 ( 默认是false )
                yes_or_no_paging: true,
                // 表格头部数据 (最好必须有,要不连头都没有)
                msg:[
                    {
                        title: '用户ID',    //表单头部名字
                        fieId: 'id'         //表单里面和后台对应的名称
                    },
                    {
                        title: '用户权限',
                        fieId: 'userpower',
                    },
                    {
                        title: '用户姓名',
                        fieId: 'username'
                    },
                    {
                        title: '用户密码',
                        fieId: 'password'
                    },
                    {
                        title: '年龄',
                        fieId: 'age'
                    },
                    {
                        title: '爱好',
                        fieId: 'hobby'
                    },
                    {
                        title: '性别',
                        fieId: 'sex'
                    },
                    {
                        title: '操作',
                        opera : true,
                        innerTbaleName : '查看' //表单操作内部的按钮名称
                    }
                ]
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.box1{
    height: 100%;
}
</style>